<template>
    <div class="footer-bar-main">
        <router-link class="router-link home" to="/home"></router-link>
        <router-link class="router-link movie" to="/movie"></router-link>
        <router-link class="router-link ticket" to="/ticket"></router-link>
        <router-link class="router-link cinema" to="/cinema"></router-link>
        <router-link class="router-link main" to="/main"></router-link>
    </div>
</template>
<script>
export default {
    name: 'FooterBar'
}
</script>
<style lang="scss" scoped>
    .footer-bar-main{
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 104px;
        z-index: 999;
        background: url('../assets/imgs/icons/footer-bar-bg.png') no-repeat center;
        background-size: cover;
        .router-link{
            width: 70px;
            height: 70px;
            background:no-repeat center;
            background-size: 40px 40px;
            margin-top: 20px;
            &.home{
                background-image: url('../assets/imgs/icons/home.png');
                &.router-link-active{
                    background-image: url('../assets/imgs/icons/home-active.png');
                }
            }
            &.movie{
                background-image: url('../assets/imgs/icons/movie.png');
                &.router-link-active{
                    background-image: url('../assets/imgs/icons/movie-active.png');
                }
            }
            &.ticket{
                background-image: url('../assets/imgs/icons/ticket-active.png');
                background-size: 60px 60px;
                margin-top: -36px;
            }
            &.cinema{
                background-image: url('../assets/imgs/icons/cinema.png');
                &.router-link-active{
                    background-image: url('../assets/imgs/icons/cinema-active.png');
                }
            }
            &.main{
                background-image: url('../assets/imgs/icons/main.png');
                &.router-link-active{
                    background-image: url('../assets/imgs/icons/main-active.png');
                }
            }
        }
    }
</style>